<template>
    <div>
        <el-form :model="model" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm page-form">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="退料编号" prop="Number">
                        <el-input v-model="model.Number" placeholder="请输入退料编号"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="退料日期" prop="PickDate">
                        <el-date-picker type="date" placeholder="选择退料日期" v-model="model.PickDate" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="退料仓库" prop="WarehouseId">
                        <el-select v-model="model.WarehouseName" placeholder="请选择退料仓库" style="width: 100%;" @change="wareHouseChange">
                            <el-option v-for="item in WarehouseList" :key="item.Id" :label="item.WarehouseName" :value="item"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="8">
                    <el-form-item label="订单状态" prop="Status">
                        <el-select v-model="model.Status" placeholder="请选择订单状态">
                            <el-option label="未审核" value="0"></el-option>
                            <el-option label="已审核" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="经办人" prop="EmployeesId">
                        <el-select v-model="model.EmployeesName" placeholder="请选择经办人" style="width: 100%;" @change="employeesChange">
                            <el-option v-for="item in EmployeesList" :key="item.Id" :label="item.Name" :value="item"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                     <el-form-item label="备注" prop="Remark">
                        <el-input v-model="model.Remark" placeholder="请输入备注"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <div class="page-tool">
                <el-button type="primary" plain icon="el-icon-plus" @click="addBom" size="small">新增</el-button>
                <el-button  type="danger" plain icon="el-icon-delete" size="small" @click="delBom">删除</el-button>
            </div>


            <el-table :data="tableData" ref="dataForm" v-loading="isLoading" height="360" >
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column  prop="ItemCode" label="编号" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="ItemName" label="名称" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="Model" label="型号" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="Spec" label="规格" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="Kind" label="品类" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="UnitOfMeasure" label="单位" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="CurrCount" label="当前库存" :show-overflow-tooltip="true"></el-table-column>

                <el-table-column prop="Count" label="数量" :show-overflow-tooltip="true">
                     <template slot-scope="scope">
                        <el-input v-model="scope.row.Count"></el-input>
                    </template>
                </el-table-column>

                <el-table-column label="操作" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <el-button type="text" @click="del(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>


        </el-form>


        <div style="text-align:right; margin: 10px;">
            <el-button   @click="addOrderProductPick" >选择单据</el-button>
            <el-button type="primary" @click="submitForm">{{ isUpdate ? '立即保存' : '立即创建' }}</el-button>
            <el-button @click="resetForm">重置</el-button>
        </div>


        <!-- 弹窗 -->
        <el-dialog append-to-body :close-on-click-modal="false" :title="dialogDomain.title"
            :visible.sync="dialogDomain.dialogVisible" width="60%" >
             <SelectedItemFourStock @callback="SelectedItemFourStockCallback"  :ItemList="tableData" :WareHouseId="this.model.WarehouseId.toString()"
                v-if="dialogDomain.dialogVisible && dialogDomain.dialogType == 0" />
                <SelectedOrderProductPick @callback="SelectedOrderProductPickCallback"  :BomList="OrderProductPickList" 
                v-if="dialogDomain.dialogVisible && dialogDomain.dialogType == 1" />
        </el-dialog>

        
 
    </div>



</template>

<script>
import SelectedItemFourStock from '@/views/Product/ProductView/components/SelectedItemFourStock.vue';


import SelectedOrderProductPick from './SelectedOrderProductPick.vue';


export default {
    components: {
        SelectedItemFourStock,
        SelectedOrderProductPick
    },
    props: {
        model: {
            require: true,
            type: Object,

        },
        isUpdate: {
            require: true,
            type: Boolean
        }
    },
    data() {
        return {
            
            //仓库模型数据
            WarehouseList: [],
            
            //经办人模型数据
            EmployeesList: [],

            //检测项目数据
            tableData: [],

            
            //生产领料数据
            OrderProductPickList: [],

            isLoading: false,
            
            //对话框对象
            dialogDomain: {
                title: '物料产品选择',
                dialogVisible: false,
                dialogType: 0  //0物料产品  1单据
            },

            rules: {
                Number: { required: true, message: '请输入生产退料编号', trigger: 'blur' },
                WarehouseId: { required: true, message: '请选择退料仓库' },
                Status: { required: true, message: '请选择订单状态'},
                EmployeesId: { required: true, message: '请选择经办人'},
            }
        }
    },
    //实例生命周期
    created() {
        this.getEmployeesData();
        this.getWarehouseData();
        

        if(this.isUpdate)
            this.GetOrderProductReceiveItemById()
    },
    methods: {
        //选择经办人时为其添加经办人名和Id
        employeesChange(model){
            this.model.EmployeesId=model.Id;
            this.model.EmployeesName=model.Name;
        },
        //选择仓库时为其添加仓库名和Id
        wareHouseChange(model){
            this.model.WarehouseId=model.Id;
            this.model.WarehouseName=model.WarehouseName;
        },
        //添加检测项目
        addBom() {
            console.log(this.model);
            if(this.model.WarehouseId==""){
                this.showNotify('请选择仓库');
                return;
            }
            this.dialogDomain.title = "选择物料产品";
            this.dialogDomain.dialogVisible = true;
            this.dialogDomain.dialogType = 0;
        },
        //添加选择单据
        addOrderProductPick() {
            this.dialogDomain.title = "选择选择单据";
            this.dialogDomain.dialogVisible = true;
            this.dialogDomain.dialogType = 1;
        },
        //删除检测项目
        delBom(){
            if(this.$refs.dataForm.selection.length<=0){
                this.showNotify('请选择一项');
                return;
            }

            this.$refs.dataForm.selection.forEach(row => {
                const index = this.tableData.indexOf(row);
                this.tableData.splice(index, 1);
            });
        },
        //删除产品BOM组成
        del(model) {
            let index = this.tableData.indexOf(model);
            this.tableData.splice(index,1);
        },

        //立即创建 或 保存
        submitForm() {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {

                    if (this.isUpdate) {
                        this.put();
                    }
                    else {
                        this.add();
                    }

                } else {
                    this.showNotify('请输入必填项');
                    return false;
                }
            });
        },
        //重置
        resetForm() {
            this.$refs['ruleForm'].resetFields();
        },
        add() {
            console.log(this.model)
            this.$http.postForm('/api/OrderProductReceive', { model: this.model,OrderProductReceiveItemString:JSON.stringify(this.tableData) }, { loading: this.$loading() })
            .then(res => {
                this.$emit('callback');
            })

        },
        //修改
        put() {
            console.log(this.tableData);
            this.$http.putForm('/api/OrderProductReceive', { model: this.model,OrderProductReceiveItemString:JSON.stringify(this.tableData) }, { loading: this.$loading() })
                .then((res) => {
                    this.$emit('callback');
                })
        },

        //根据生产退料Id 返回产品数据
        GetOrderProductReceiveItemById() {
            this.isLoading=true;
            this.$http.get('/api/OrderProductReceive/GetOrderProductReceiveItemById',{
                params:{
                    OrderProductReceiveId:this.model.Id,
                    WarehouseId:this.model.WarehouseId
                }
            })
            .then(res => {
                this.isLoading=false;
                this.tableData = res.Data;
            })
        },

        //获取仓库数据
        getWarehouseData() {
            this.$http.get('/api/Warehouse/GetAll')
                .then(res => {
                    this.WarehouseList=res.Data;
                })
        },
        //获取经办人
        getEmployeesData() {
            this.$http.get('/api/Employees/GetAll')
                .then(res => {
                    this.EmployeesList=res.Data;
                })
        },

        
        


        //选择检测项目回调
        SelectedItemFourStockCallback(){
            
            this.dialogDomain.dialogVisible = false;


            let arr = [];
            this.tableData.map(x => { 
                    var obj = new Object();
                    //处理所需字段
                    this.$set(obj, 'ItemId', x.ItemId);
                    this.$set(obj, 'ItemCode', x.ItemCode);
                    this.$set(obj, 'ItemName', x.ItemName);
                    this.$set(obj, 'Model', x.Model);
                    this.$set(obj, 'Spec', x.Spec);
                    this.$set(obj, 'Kind', x.Kind);
                    this.$set(obj, 'UnitOfMeasure', x.UnitOfMeasure);
                    this.$set(obj, 'CurrCount', x.CurrCount);
                    this.$set(obj, 'Count', x.Count || 1);
                    arr.push(obj);
            })

            this.tableData = arr;
            console.log(arr);



        },
        //根据生产领料编号和仓库编号获取生产领料明细表方法
        GetOrderProductPickItemById() {
            this.isLoading=true;
            this.$http.get('/api/OrderProductReceive/GetOrderProductPickItemById',{
                params:{
                    OrderProductPickId:this.model.OrderProductPickId,
                    WarehouseId:this.model.WarehouseId
                }
            })
            .then(res => {
                this.isLoading=false;
                this.tableData = res.Data;
            })
        },



        //选择单据回调
        SelectedOrderProductPickCallback(model){
            console.log(model);
            this.dialogDomain.dialogVisible = false;

            this.model.OrderProductPickId=model.Id;
            this.model.EmployeesId=model.EmployeesId;
            this.model.EmployeesName=model.EmployeesName;
            this.model.WarehouseId=model.WarehouseId;
            this.model.WarehouseName=model.WarehouseName;
            this.GetOrderProductPickItemById();




        },

        


    }

}
</script>

<style>
</style>